<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Brush charts</title>

    <link href="../../assets/styles.css" rel="stylesheet" />

    <style>
      
        #wrapper {
      padding-top: 20px;
      padding-left: 10px;
      background: #fff;
      border: 1px solid #ddd;
      box-shadow: 0 22px 35px -16px rgba(0, 0, 0, 0.1);
      max-width: 650px;
      margin: 35px auto;
    }
    
    #chart-line {
      position: relative;
      margin-top: 0px;
    }
      
    </style>

    <script>
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
        )
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
        )
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
        )
    </script>

    
    <script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prop-types@15.8.1/prop-types.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
    <script src="../../../dist/apexcharts.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-apexcharts@1.7.0/dist/react-apexcharts.iife.min.js"></script>
    

    <script>
      // Replace Math.random() with a pseudo-random number generator to get reproducible results in e2e tests
      // Based on https://gist.github.com/blixt/f17b47c62508be59987b
      var _seed = 42;
      Math.random = function() {
        _seed = _seed * 16807 % 2147483647;
        return (_seed - 1) / 2147483646;
      };
    </script>

    <script>
  /*
    // this function will generate output in this format
    // data = [
        [timestamp, 23],
        [timestamp, 33],
        [timestamp, 12]
        ...
    ]
  */
  function generateDayWiseTimeSeries(baseval, count, yrange) {
    var i = 0;
    var series = [];
    while (i < count) {
      var x = baseval;
      var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1) * i / count) + yrange.min;
  
      series.push([x, y]);
      baseval += 86400000;
      i++;
    }
    return series;
  }
  
  var data1 = generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 185, {
    min: 20,
    max: 100
  })
  var data2 = generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 185, {
    min: 5,
    max: 50
  })
  
  </script>
  </head>

  <body>
    
    <div id="app"></div>

    <div id="html">
      &lt;div id=&quot;wrapper&quot;&gt;
  &lt;div id=&quot;chart-line2&quot;&gt;
  &lt;ReactApexChart options={state.options} series={state.series} type=&quot;line&quot; height={230} /&gt;
&lt;/div&gt;
  &lt;div id=&quot;chart-line&quot;&gt;
  &lt;ReactApexChart options={state.optionsLine} series={state.seriesLine} type=&quot;area&quot; height={130} /&gt;
&lt;/div&gt;
&lt;/div&gt;
    </div>

    <script type="text/babel">
      const ApexChart = () => {
        const [state, setState] = React.useState({
          
            series: [{
              name: 'Flies',
              data: data1
            },{
              name: 'Spiders',
              data: data2
            }],
            options: {
              chart: {
                id: 'chart2',
                type: 'line',
                height: 230,
                dropShadow: {
                    enabled: true,
                    enabledOnSeries: [1]
                },
                toolbar: {
                  autoSelected: 'pan',
                  show: false
                }
              },
              colors: ['#008FFB', '#00E396'],
              stroke: {
                width: 3
              },
              dataLabels: {
                enabled: false
              },
              stroke: {
                width: [2,6],
                curve: ['straight','monotoneCubic']
              },
              fill: {
                opacity: [1,0.75],
              },
              markers: {
                size: 0
              },
              yaxis: [
                {
                  seriesName: 'Flies',
                  axisTicks: {
                    show: true,
                    color: '#008FFB'
                  },
                  axisBorder: {
                    show: true,
                    color: '#008FFB'
                  },
                  labels: {
                    style: {
                      colors: '#008FFB',
                    }
                  },
                  title: {
                    text: "Flies",
                    style: {
                      color: '#008FFB'
                    }
                  },
                },
                {
                  seriesName: 'Spiders',
                  opposite: true,
                  axisTicks: {
                    show: true,
                    color: '#00E396'
                  },
                  axisBorder: {
                    show: true,
                    color: '#00E396'
                  },
                  labels: {
                    style: {
                      colors: '#00E396'
                    }
                  },
                  title: {
                    text: "Spiders",
                    style: {
                      color: '#00E396'
                    }
                  },
                }
              ],
              xaxis: {
                type: 'datetime'
              }
            },
          
            seriesLine: [{
              name: 'Flies',
              data: data1
            },{
              name: 'Spiders',
              data: data2
            }],
            optionsLine: {
              chart: {
                id: 'chart1',
                height: 130,
                type: 'area',
                brush:{
                  target: 'chart2',
                  enabled: true
                },
                selection: {
                  enabled: true,
                  xaxis: {
                    min: new Date('24 April 2017').getTime(),
                    max: new Date('29 May 2017').getTime()
                  }
                },
              },
              colors: ['#008FFB', '#00E396'],
              stroke: {
                width: [1, 3],
                curve: ['straight', 'monotoneCubic']
              },
              fill: {
                type: 'gradient',
                gradient: {
                  opacityFrom: 0.91,
                  opacityTo: 0.1,
                }
              },
              xaxis: {
                type: 'datetime',
                tooltip: {
                  enabled: false
                }
              },
              yaxis: {
                max: 100,
                tickAmount: 2
              }
            },
          
          
        });

        

        return (
          <div>
            <div id="wrapper">
                <div id="chart-line2">
                <ReactApexChart options={state.options} series={state.series} type="line" height={230} />
              </div>
                <div id="chart-line">
                <ReactApexChart options={state.optionsLine} series={state.seriesLine} type="area" height={130} />
              </div>
              </div>
            <div id="html-dist"></div>
          </div>
        );
      }

      const domContainer = document.querySelector('#app');
      ReactDOM.render(<ApexChart />, domContainer);
    </script>

    
  </body>
</html>
